<template>
  <div class="admin">
    <!-- <h1>欢迎使用vue</h1> -->
    <div class="menu" v-bind:style="{ width: menuWidth }">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isHideMenu"
        :collapse-transition="false"
        background-color="#26344f"
        text-color="#fff">
        <el-submenu index="1">
          <template slot="title">
            <i class="iconfont icon-menu1"></i>
            <span slot="title">后台首页</span>
          </template>
          <el-menu-item index="1-1">
            <i class="iconfont icon-setting"></i>
            欢迎页
          </el-menu-item>
          <el-menu-item index="1-2">
            <i class="iconfont icon-setting"></i>
            访客记录
          </el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="iconfont icon-menu1"></i>
            <span slot="title">用户管理</span>
          </template>
          <el-menu-item index="2-1">
            <i class="iconfont icon-setting"></i>
            用户列表
          </el-menu-item>
          <el-menu-item index="2-2">
            <i class="iconfont icon-setting"></i>
            用户创建
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="main">
      <div class="top">
        <!-- top开始 -->
        <div class="left">
          <div class="btn" @click="changeMenuFn">
            <i :class="menuIcon"></i>
          </div>
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>商品管理</el-breadcrumb-item>
              <el-breadcrumb-item>列表</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="right">
          <span>丁大壮(vip)</span>
          <i class="iconfont icon-guanji1"></i>
          <i class="iconfont icon-fullScreen"></i>
        </div>
      </div>
      <!-- top结束 -->

      <!-- content开始 -->
      <div class="content">
        <!-- <h1>你好vue</h1>
        <h2 style="margin-top:1000px">欢迎使用 </h2> -->
        <!-- 在路由已经匹配的组件中挖坑 二级 -->
        <router-view></router-view>
      </div>
      <!-- content结束 -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 菜单相关
      // isHideMenu: true
      isHideMenu: false,
      menuIcon: 'el-icon-s-fold',
      menuWidth: '200px'
    };
  },
  methods: {
    // 控制菜单切换
    // 菜单切换的思路
    // 1.给按钮绑定点击事件
    // 2.事件处理函数中
    //   2.1控制图标切换    判断isHideMenu  true向右,false向左
    //   2.2控制.menu宽度 先加v-bind:style="{width:使用模型数据}" 事件中判断是否隐藏isHideMenu  true 64px,false 200px

    // 3.留心:关闭原来的特性,否则会有卡顿
    // 4.因为是自己控制menu的宽度,默认情况下比较生硬,为了好看使用transition过渡
    changeMenuFn() {
      // 先
      this.isHideMenu = !this.isHideMenu;
      this.menuIcon = this.isHideMenu ? 'el-icon-s-unfold' : 'el-icon-s-fold';
      this.menuWidth = this.isHideMenu ? '64px' : '200px';
    },

    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
      console.log('展开');
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
      console.log('收起');
    }
  }
};
</script>

<style lang="scss" scoped>
.admin {
  width: 100%;
  height: 100%;
  display: flex;
  // color:#fff;

  .menu {
    width: 200px;
    height: 100%;
    background: #263445;
    transition: width 0.5s;

    .el-menu {
      border: none;
    }
  }

  .main {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;

    .top {
      width: 100%;
      height: 50px;
      background: deepskyblue;
      display: flex;
      justify-content: space-between;

      .left {
        width: 300px;
        height: 100%;
        // background: skyblue;
        display: flex;

        .btn {
          width: 50px;
          height: 50px;
          background: deepskyblue;
          font-size: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .breadcrumb {
          width: 250px;
          height: 100%;
          background: deepskyblue;
          display: flex;
          // justify-content: center;
          align-items: center;
          color: #fff;
        }
      }
      .right {
        width: 240px;
        height: 100%;
        background: deepskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 50px;
        i {
          font-size: 20px;
          margin-left: 5px;
          cursor: pointer;
        }
      }
    }

    .content {
      flex: 1;
      overflow-y: scroll;
      // background:black ;
    }
  }
}
</style>
